<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>头尾操作</title>
    <script th:replace="common/head::static"></script>
    <style>
        body{
            text-align: center;
        }

        .mui-btn{
            width: 50%;
            margin: 10px auto;
        }
    </style>
</head>
<body>
<button class="mui-btn" onclick="HuanziHeader.hide();">隐藏头部</button>
<button class="mui-btn"  onclick="HuanziHeader.show();">显示头部</button>
<button class="mui-btn" onclick="HuanziFooter.hide();">隐藏底部按钮</button>
<button class="mui-btn"  onclick="HuanziFooter.show();">显示底部按钮</button>
<button class="mui-btn"  onclick="HuanziHeader.init();">清空所有头部按钮</button>
<button class="mui-btn"  onclick="HuanziHeader.showBackButton();">显示头部返回按钮</button>
<button class="mui-btn"  onclick="HuanziHeader.hideBackButton();">隐藏头部返回按钮</button>
<button class="mui-btn"  onclick="HuanziHeader.appendButton('<a class=\'mui-icon mui-icon-bars mui-pull-right\' onclick=\'butFun()\'></a>');">追加头部按钮</button>
<button class="mui-btn"  onclick="HuanziHeader.removeButton('.mui-icon-bars');">移除头部按钮</button>

<button class="mui-btn">无用按钮</button>
<button class="mui-btn">无用按钮</button>
<button class="mui-btn">无用按钮</button>
<button class="mui-btn">无用按钮</button>
<button class="mui-btn">无用按钮</button>
<button class="mui-btn">无用按钮</button>
<button class="mui-btn">无用按钮</button>
<button class="mui-btn">无用按钮</button>
<button class="mui-btn">无用按钮</button>
<button class="mui-btn">无用按钮</button>
<button class="mui-btn">无用按钮</button>
<button class="mui-btn">无用按钮</button>
<button class="mui-btn">最后一个</button>
</body>
<script>
    function butFun() {
        HuanziDialog.toast("头部按钮被点击！")
    }
</script>
</html>